import React, {Component} from 'react';
import {
    Flex,
    Icon,
    Tabs,
    WingBlank,
    WhiteSpace,
    NavBar,
    Popover,
    Checkbox,
    Modal,
    List,
    Button,
    Drawer,
    Toast
} from 'antd-mobile';
import { connect } from 'dva';
import NoLazyImg from '../../components/NoLazyImg/NoLazyImg';
import {routerRedux} from "dva/router";
import {others_class} from './findOthers.less';
import findco from '../../assets/svg/findco.svg';
import {createForm} from "rc-form";




const Item = Popover.Item;
const CheckboxItem = Checkbox.CheckboxItem;
class FindOther extends Component {
    constructor(props){
        super(props);
        this.state={
            show:'false',
            checkboxNum:0,
            checkedNum:0,
            isChecked: [],
            pageNo:1,
        }
        this.isCheck=[]
    }

    isHave=()=>{
        if(this.isCheck.length==0){
            Toast.info('至少选择一个!');
            return
             }else{
            this.props.dispatch(routerRedux.push({
                pathname: `/findPeople/${this.isCheck}`}))
        }

    }
    onChange = (val) => {
        console.log(val)
        var { isChecked } = this.state;
        if (isChecked.includes(val)) this.setState({isChecked: isChecked.filter(e => e != val)});
        else this.setState({isChecked: [...isChecked, val]})


        if(this.isCheck.indexOf(val) != -1){
            var index = this.isCheck.indexOf(val);
            if (index != -1) {
                this.isCheck.splice(index, 1);
            }
        }else{
            this.isCheck.push(val);
        }
            this.setState({checkboxNum:this.isCheck.length})
        if(this.isCheck.length >4){
            console.log(this.isCheck)
            Toast.info('最多选择四个!');
            return false
        }

    }

    change=()=>{
        const {styles={}}=this.props.findOthers;
        this.setState({pageNo:(this.state.pageNo+1)})
        this.props.dispatch({ type: 'findOthers/getStylesEFF', obj:{ pageNo:styles.pageNo+1 }})
    }




    componentDidMount(){
        this.props.dispatch({ type: 'findOthers/getStylesEFF', obj:{ pageNo:1 }})
    }


    render() {
        const {styles={}}=this.props.findOthers;
        console.log(styles)
        const {list=[]} = styles;
        return ( <Flex className={others_class} direction="column">
                <p className='others_title'>选择您感兴趣的内容
                    {/*<span onClick={this.change}style={{fontSize:'.25rem',textAlign:'right',display:'block',marginTop:'.2rem'}}>换一批</span>*/}
                </p>
                    <Flex style={{width:'100%',flexWrap:'wrap',marginTop:".5rem"}}>
                        {list!=undefined && list.map((v, i, a) => {
                            return (
                                <div key={i} className='style_box'>
                                    <div style={{width:'2rem',height:'2rem',position:"relative",margin:"auto"}}>
                                        <NoLazyImg style={{width:'2rem',height:'2rem',borderRadius:'.3rem'}} src={ v.image } />
                                        <Checkbox key={i} className='checkbox' onChange={() => this.onChange(v.id)} disabled={this.state.checkboxNum > 3 && ![...this.state.isChecked].includes(v.id) ? true : false} />
                                    </div>
                                    <p>{v.name}</p>

                                </div>
                            )
                        })
                        }


                    </Flex>
                <Button type="primary"style={{position:'absolute',bottom:'5%',width:'88%',borderRadius:'.45rem'}}onClick={ this.isHave} >下一步</Button>
            </Flex>

        )


    }
}

export default connect(({ findOthers }) => ({ findOthers}))(FindOther);
